تنظیم موقعیت متن در CSS - نحوه راست چین سازی متن در CSS

تنظیم موقعیت متن در CSS - نحوه راست چین سازی متن در CSS
در این مقاله، به پاسخ دادن به سوال های زیر می‌پردازیم:
• • منظور از چپ چین کردن متن چیست؟
  • چگونه متن را چپ چین کنیم ؟
  • منظور از راست چین کردن متن چیست؟
  • منظور از وسط چین کردن متن چیست؟
  • چگونه متن را تراز کنیم؟
  • چطور می‌تونیم متن رو در راستای افقی تراز کنیم؟
اول باید مفهوم تراز کردن رو متوجه بشیم. مسلما اگه با نرم افزارهای نگارشی کار کرده باشین، مثل microsoft word، با این قضیه آشنایی دارین!
اما اگه آشنایی هم ندارید مشکلی نیست، مفهوم رو از اول بررسی می‌کنیم.
سرفصل‌های پست
مفهوم تراز کردن
فرض کنید داخل یه جعبه، یه جعبه کوچیک تر داریم.
جعبه کوچیک رو تو هرجایی از جعبه بزرگ می‌تونیم قرار بدیم.
برای مثال، در انتهای چپ جعبه:


یا در وسط جعبه:وسط چین در CSS
و یا در انتهای راست جعبه:
راست چین در CSS
به زبان ساده، به این جابه جایی، تراز کردن می‌گیم.
حالا بیاید این مفهوم رو به CSS تعمیم بدیم.
ما می‌تونیم عناصر CSS رو داخل محدوده یا عنصر پدری که براشون تعریف کردیم، راست، چپ و وسط چین کنیم. اما قبل از پرداختن به این قضیه که چطور این کار رو باید انجام بدیم، باید متوجه باشیم که محدوده ی اشغالی هر عنصر، تا چه جایی پیش می‌ره.
این موضوع، کاملا بستگی به کد CSSای داره که برای عناصر پدر و فرزند می‌نویسیم.
به مثال زیر توجه کنین:
کد HTML:
<div>

   <p>Hello mizfa !</p>

</div>
کد CSS:
div{

   height: 200px; 

   width: 100px; 

}
نتیجه ای که مشاهده می‌کنیم به فرم زیره:
نمونه چینش متن در CSS
با توجه به نکته ای که گفتیم، محدوده عنصر پدر، یک محدوده ی کوچیک به ابعاد 200 در 100 پیکسل هست.
ما نمی‌تونیم در راستای این محدوده، عنصر فرزند یا p رو جا به جا کنیم، چون جای کافی وجود نداره.
خالا بیاید محدوده ی بزرگ تری رو تعریف کنیم:
کد CSS:
div{

   height: 200px;

   width: 500px;

   border: 1px solid black;

}
تو کد فوق، از خاصیت border استفاده کردیم که گستردگی محدوده عنصر پدر، برای ما واضح باشه.
نتیجه به فرم زیر خواهد بود:
چپ چین به همراه Border
همونطور که می‌بینیم، با توجه به دستورات در کد CSS موردنظر، محدوده ی متن ما یک عنصر div با عرض 500 پیکسل و ارتفاع 200 پیکسل هست.
حالا می‌‌تونیم عنصر مورد نظر رو در محدوده ای که براش آماده کردیم، جا به جا کنیم.
خاصیت text-align
مقادیری که خاصیت text-align قبول می‌کنه به شرح زیر هستن:
• center
• left
• right
• justify
• start
• end
وسط چین – Center
این مقدار، متن رو به وسط محدوده هدایت می‌کنه.
div{

   text-align: center;

}
وسط چین کردن متن در CSS
چپ چین – Left
این مقدار، متن رو به سمت چپ محدوده هدایت می‌کنه.
div{

   text-align: left;

}
چپ چین کردن متن در CSS
راست چین – right
این مقدار، متن رو به سمت راست محدوده هدایت می‌کنه.
div{

   text-align: right;

}
تنظیم موقعیت متن راست در CSS
تراز کردن – justify
این مقدار، مثل مقدار left عمل می‌کنه. با این تفاوت که فاصله ها رو تا حد ممکن می‌پوشونه و گوشه های متن رو با مرز جعبه ای که در درونش هست تماس میده.
div{

   text-align: justify;

}
تنظیم موقعیت متن Justify در CSS
شروع خط – start
این مقدار، با توجه به جهتی که برای صفحه تدارک دیدیم ( direction )، محتوا رو از ابتدای محدوده عنصر پدر شروع می‌کنه. ( این بحث رو تو فصل های آینده بیشتر مرور می‌کنیم )
div{

   text-align: start;

}
تنظیم موقعیت متن Start در CSS
پایان خط – end
این مقدار، با توجه به direction مربوطه، محتوا رو از انتهای محدوده عنصر پدر تولید می‌کنه.
div{

   text-align: end;

}
تنظیم موقعیت متن End در CSS
اگه مشکل یا ابهامی براتون پیش اومد، حتما تو بخش نظرات بپرسین. من پاسخگو هستم ??
اختصاص خاصیت text-align به عناصر فرزند
یک سوال ممکنه پیش بیاد. اگه چندتا متن داشته باشیم، بخوایم یه تیکش راست شه، یه تیکش چپ شه و یه تیکش هم وسط شه، اون موقع چیکار کنیم؟
ما می‌تونیم خاصیت text-align رو مستقیما به عناصر مورد نظرمون هم نسبت بدیم و حتما لازم نیست به عنصر پدر نسبت داده بشه.
به مثال زیر توجه کنین:
کد HTML:
<div>

   <h1> Mizfa1 </h1> 

   <h2> Mizfa2 </h2> 

   <h3> Mizfa3 </h3> 

</div>
کد CSS:
div{

   width: 500px; 

   height: 270px; 

   border: 1px solid black; 

} 

div h1{ 

   text-align: left; 

} 

div h2{ 

   text-align: center; 

} 

div h3{ 

   text-align: right; 

}
نتیجه:
چینش زیر مجموعه ها در CSS
پایان ترم
 
سوال:
کدی به شکل زیر داریم،‌ که نتیجه اون در پایین اومده:
<div class="first">

   <div class="second">

      <p>CSS tutorial</p>

   </div>

</div>
div.first{

   width: 500px;

   height: 200px;

   background-color: #48cd4f;

   text-align:center;

}



div.second{

   width:10%;

}



p{

   font-family: sans-serif;

   color:white;

   padding: 20px;

}
تمرین برای چینش متن CSS
هر کاری می‌کنیم که متن رو بیاریم وسط عنصر سبز رنگ، نمیشه.
مشکل از کجاست؟
به ایمیل کسانی که پاسخ درست و کامل در در نظرات بگن 2 هزارتومان در پنل کاربری آکادمی میزفا حسابشون شارژ میشه.
نتیجه گیری
در این مقاله از اموزش کامل css ، با مفهوم و نحوه تراز کردن متن ها به صورت افقی آشنا شدیم.
یاد گرفتیم که چطور می‌تونیم متن هامون رو به سمت های راست، وسط و چپ عناصر حامل اون ها هدایت کنیم.
در نهایت، خاصیت text-align رو علاوه بر عناصر پدر، به عناصر فرزند تعمیم دادیم.
اگه نکته، پیشنهاد و انتقادی در رابطه با آموزش‌ها دارین، خیلی خیلی خوشحال می‌شیم که اون رو در بخش دیدگاه‌های پایگاه دانش میزفا ارسال کنین.
مدیر محتوا: علی اسمعیلی